<%@ taglib prefix="m" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page isELIgnored="false"%>
<html>
<head>
<link rel="stylesheet" href="css/datePicker.css" />
<link rel="stylesheet" href="css/reset-fonts-grids.css" />
<link rel="stylesheet" href="css/base.css" />
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div id="doc3" class="yui-t1">
<div id="hd"></div>
<div id="bd">
<div id="yui-main">
<div class="yui-b" id="content">
<table>
	<tr id="ct-table-optionbar">
		<th colspan="5">
		<div id="option">
		<ul>
			<li><m:message key="option" /></li>
			<li><a href='javascript:delBill();'><m:message key="del" /></a></li>
			<li class="option-spacing"></li>
			<li><m:message key="choose" /></li>
			<li><a href='javascript:selectAll();'><m:message key="all" /></a></li>
			<li><a href='javascript:unSelectAll();'><m:message
				key="none" /></a></li>
			<li class="option-spacing"></li>
			<li><m:message key="filterData" /></li>
			<li><a href='index.htm'><m:message key="all" /></a></li>
			<li><a href='javascript:showFilterByDateDialog();'><m:message key="filterByDate" /></a></li>
			<li><a href='javascript:showLabelPanel();'><m:message key="filterByLabel" /></a></li>
			<li><a href=#><m:message key="filterByKerword" /></a></li>
		</ul>
		</div>
		</th>
	</tr>
	<c:forEach var="bill" items="${bills}" varStatus="stat">
		<c:choose>
			<c:when test="${(stat.index % 2) == 0}">
				<tr class="odd" keyString="${bill.keyString}">
					<td><input type="checkbox" keyString="${bill.keyString}"/></td>
					<td><a href="javascript:showBillDialogEdit('${bill.keyString}');"><m:formatDate value="${ bill.date }" type="both" pattern="yyyy-MM-dd"/></a></td>
					<td>${ bill.amount }</td>
					<td>
						<c:forEach var="label" items="${ bill.labels }" varStatus="labelStat">
							<c:if test="${ labelStat.count >= 2}"><c:out value=","/></c:if>
							<c:out value="${ label.name }"></c:out>
						</c:forEach>
					</td>
					<td>${ bill.remark.value }</td>
				</tr>
			</c:when>
			<c:otherwise>
				<tr keyString="${bill.keyString}">
					<td><input type="checkbox" keyString="${bill.keyString}"/></td>
					<td><a href="javascript:showBillDialogEdit('${bill.keyString}');"><m:formatDate value="${ bill.date }" type="both" pattern="yyyy-MM-dd"/></a></td>
					<td>${ bill.amount }</td>
					<td>
						<c:forEach var="label" items="${ bill.labels }" varStatus="labelStat">
							<c:if test="${ labelStat.count >= 2}"><c:out value=","/></c:if>
							<c:out value="${ label.name }"></c:out>
						</c:forEach>
					</td>
					<td>${ bill.remark.value }</td>
				</tr>
			</c:otherwise>
		</c:choose>
	</c:forEach>
	
	<tr id='table-footer'>
		<td colspan="5">
		<div id="stat" class="floatLeft">
		<ul>
			<li><m:message key="allIncome"/></li>
			<li>${ billInfo.totalIncome}</li>
			<li class="option-spacing"></li>
			<li><m:message key="allOutcome"/></li>
			<li>${ billInfo.totalOutcome}</li>
			<li class="option-spacing"></li>
			<li><m:message key="balance"/></li>
			<li>${ billInfo.balance}</li>
		</ul>
		</div>
		<div class="paging floatRight"><span><m:message
			key="curData">
			<m:param value="${ billInfo.currentDateIndex}" />
			<m:param value="${ billInfo.currentLastDateIndex}" />
			<m:param value="${ billInfo.dateCount}" />
		</m:message>
		<c:if test="${ billInfo.currentDateIndex != 1}">
			<c:if test="${ (billInfo.currentLastDateIndex - billInfo.currentDateIndex +1)  == billInfo.countPerPage }">
			<a href="javascript:jump(0)"><m:message key="newest" /></a>
			</c:if>
			<a href="javascript:jump(${ billInfo.currentDateIndex - billInfo.countPerPage -1})"><m:message key="newer" /></a>
		</c:if>
		<c:if test="${ billInfo.currentLastDateIndex != billInfo.dateCount}">
			<a href="javascript:jump(${ billInfo.currentLastDateIndex })"><m:message key="older" /></a>
			<c:if test="${(billInfo.currentLastDateIndex - billInfo.currentDateIndex +1) == billInfo.countPerPage }">
			<a href="javascript:jump(${ billInfo.dateCount - billInfo.countPerPage})"><m:message key="oldest" /></a>
			</c:if>
		</c:if>
		</span></div>
		</td>
	</tr>
</table>
</div>
</div>
<div class="yui-b" id="leftbar">
<div id="menu">
<ul>
	<li><a href="javascript:showBillDialogAdd();" class="bold"><m:message
		key="addBill" /></a></li>
	<li class="spacing"></li>
	<li class="active"><a href="#"><m:message key="manageBill" /></a></li>
	<li><a href="label.htm"><m:message key="manageLabel" /></a></li>
	<li><a href="schedule.html"><m:message key="manageSchedule" /></a></li>
	<li><a href="#"><m:message key="showReport" /></a></li>
	<li><a href="#"><m:message key="preferences" /></a></li>
	<li><a href="#"><m:message key="about" /></a></li>
</ul>
</div>
</div>
</div>
<div id="ft">
<!--  <%@include file="footer.jsp" %> -->
</div>
</div>
<!-- pop up window -->
<div id="mask"></div>
<div id="bill-dialog" class="dialog">
<h2></h2>
<div class="center">
<table>
	<tr>
		<td class="field"><m:message key="date"/></td>
		<td><input type='hidden' id='_bill_key_string'><input type="text" id='_bill_date'><input type="hidden" id="_bill_id" ></td>
	</tr>
	<tr class="odd">
		<td class="field"><m:message key="amount"/></td>
		<td><input type="text" id="_bill_amount"></td>
	</tr>
	<tr>
		<td class="field"><m:message key="label"/></td>
		<td><input type="text" id="_bill_label" onclick="showLabelPanel(this);return false"></td>
	</tr>
	<tr class="odd">
		<td class="field"><m:message key="remark"/></td>
		<td><textarea id="_bill_remark"></textarea></td>
	</tr>
</table>
</div>
<div class="option">
	<span id="billAddOptionBar">
		<a href="javascript:addBillAndNext();"><m:message key="OKAndAddNext"/></a>
		<a href="javascript:addBill();"><m:message key="OK"/></a>
		<a href="javascript:shutBillDialog();"><m:message key="cancel"/></a>
	</span>
	<span id="billEditOptionBar">
		<a href="javascript:editBill();"><m:message key="OK" /></a>
		<a href="javascript:shutBillDialog();"><m:message key="cancel" /></a>
	</span>
</div>
</div>
<div id="filter-by-date-dialog" class="dialog">
	<h2><m:message key="filterByDate"/></h2>
	<div class="center">
		<table>
			<tr>
				<td>From:</td>
				<td class="_td"><input type="text" id="filterByDateFrom" value="${ filterByDateFrom }"></td>
				
			</tr>
			<tr>
				<td>To:</td>
				<td class="_td"><input type="text" id="filterByDateTo" value="${ filterByDateTo }"></td>
			</tr>
		</table>
	</div>
	<div class="option clear">
		<a href="javascript:shutFilterByDateDialog();"><m:message key="cancel" /></a>
		<a href="javascript:filterByDate();"><m:message key="OK"/></a>
	</div>
</div>
<div id="label-panel" class="dialog">
	<input type="hidden" id="target_input">
	<div class="header">
		<div class="floatRight hidden" id="_select_label_for_bill"><span><a href="javascript:chooseLabel();">OK</a></span><span><a href='javascript:shutLabelPanel("select");'>Cancel</a></span></div>
		<div class="floatRight hidden" id="_filter_bill_by_label"><span><a href="javascript:filterByLabel();">OK</a></span><span><a href='javascript:shutLabelPanel("filter");'>Cancel</a></span></div>
		<div><m:message key="chooseLabel" /></div>
	</div>
	<table>
		<tr>
		<c:forEach var="label" items="${labels }" varStatus="labelStat">
		<c:choose>
			<c:when test="${labelStat.index != 0 && (labelStat.index % 5) ==0}">
				</tr>
				<tr>
				<td><a href="javascript:void();" onclick="clickLabel(this); return false;" selected='false'>${ label.name }</a></td>
			</c:when>
			<c:otherwise>
				<td><a href="javascript:void();" onclick="clickLabel(this); return false;">${ label.name }</a></td>
			</c:otherwise>
		</c:choose>
		</c:forEach>
		</tr>
	</table>
</div>
</body>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/addBill.js"></script>
<script type="text/javascript" src="js/manageBill.js"></script>
<script src="js/jquery.datePicker.js" type="text/javascript" ></script>
<!--[if IE]><script type="text/javascript" src="js/jquery.bgiframe.min.js"></script><![endif]-->
</html>